import React, { useEffect, useState } from "react";
import stores from "../../assets/scss/stores/stores.module.scss";
import { useNavigate } from "react-router-dom";
import { getlist, getmenu, getdel, getdelAll } from "../../apis/stores/stores";
import type { ColumnsType } from "antd/es/table";
import StoresDetail from './StoresDetail'
// 走马灯
// const contentStyle: React.CSSProperties = {
//   margin: 0,
//   height: "160px",
//   color: "#fff",
//   lineHeight: "160px",
//   textAlign: "center",
//   background: "#364d79",
// };
import {
  Col,
  Form,
  Select,
  Input,
  Pagination,
  Space,
  Table,
  Button,
  Row,
  Popconfirm,
  Image
} from "antd";

// 表格类型
interface DataType {
  key: React.Key;
  name: string;
  address: string;
}

// 表格内容
const Questions = (): JSX.Element => {

  const navigate = useNavigate();
  // 弹出
  const [open, setOpen] = useState(false);

  // 表格表头
  const columns: ColumnsType<DataType> = [
    {
      title: "id",
      dataIndex: "id",
      align: "center",
    },
    {
      title: "门店",
      dataIndex: "name",
      align: "center",
      // render: (text) => <a onClick={showModal}>{text}</a>,
      render: (_: any, record: any) => (
        <Space>
          <a
            style={{ borderBottom: "1px solid #1677ff" }}
            onClick={() => parent(record)}
          >
            {record.name}
          </a>
        </Space>
      ),
    },
    {
      title: "地址",
      dataIndex: "address",
      align: "center",
    },
    {
      title: "门店logo",
      dataIndex: "logo",
      align: "center",
      render: (_: any, record: any) => (
        <Space size="middle">
          <Image
           src={process.env.REACT_APP_IMG_URL + record.logo}
           style={{ width: "80px", height: "70px" }}
           alt="暂无图片"
          >

          </Image>
        </Space>
      ),
    },
    {
      title: "服务范围",
      dataIndex: "services",
      align: "center",
    },
    {
      title: "店主",
      dataIndex: "username",
      align: "center",
    },
    {
      title: "联系电话",
      dataIndex: "tel",
      align: "center",
    },
    {
      title: "营业时间",
      align: "center",
      render: (_: any, record: any) => (
        <Space size="middle">
          <span>{`${record.startTime}~${record.endTime}`}</span>
        </Space>
      ),
    },
    {
      title: "操作",
      dataIndex: "address",
      align: "center",
      render: (_: any, record: any) => (
        <Space size="middle">
          <Button
            type="primary"
            onClick={userIngo(record.id)}
            style={{ background: "#67c23a" }}
          >
            修改
          </Button>
          <Popconfirm
            title="删除"
            description="是否删除该条数据?"
            onConfirm={() => del(record.id)}
            okText="Yes"
            cancelText="No"
          >
            <Button
              type="primary"
              style={{
                background: "#f56c6c",
                color: "#fff",
                marginLeft: "15px",
              }}
            >
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  const [list, setList] = useState({
    array: [],
    total: 0,
  });
  const [user, setpage] = useState({
    page: 1,
    psize: 10,
    key: "",
    services: "",
  });

  const onChange = (page: number, psize: number) => {
    console.log(page, psize);

    setpage({ ...user, page, psize });
  };
  useEffect(() => {
    getData();
  }, [user]);
  // 下拉
  useEffect(() => {
    getdown();
  }, []);
  
  // 列表
  const getData = async () => {
    const res = await getlist(user);
    console.log(11111, res);
    setList({ ...list, array: res.data.list, total: res.data.counts });
    // data = list.array;
  };
  // 单独删除
  const del = async (id: number) => {
    const res = await getdel({ id });
    getData();
    console.log("单删", res);
  };
  //批量删除
  const delAll = async () => {
    console.log({ ids: selectedRowKeys });
    const res = await getdelAll({ ids: selectedRowKeys });
    getData();
    console.log("批量删", res);
  };
  const [red,setRed]=useState({})
  const parent = (red: any) => {
    console.log(red);
    
    setRed(red)
    setOpen(true);

  };
  // 查询
  const onFinish = (values: any) => {
    setpage({ ...user, key: values.key, services: values.services });
    // getData();
  };
  // 获取下拉
  const getdown = async () => {
    const res = await getmenu();
    console.log("嘿嘿", res);
    setServicesList(res.data.list);
  };
  //添加
  const goadd = () => {
    navigate("/home/storesadd/0");
  };
  // 复选框
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onRoomChange = (houseno: React.Key[]) => {
    setSelectedRowKeys(houseno);
  };
  // 修改
  const userIngo = (id: number) => {
    return () => {
      navigate(`/home/storesadd/${id}`);
    };
  };
  const storesSelection = { selectedRowKeys, onChange: onRoomChange };
  const [servicesList, setServicesList] = useState([]);
 
  return (
    // 外部盒子
    <div className={stores.stores}>
      {/* 头部 */}
      <div className={stores.hd}>门店列表</div>
      {/* 表格 */}
      <div style={{padding:'10px 20px'}}>
      <div className={stores.text}>
        <Form
          name="wrap"
          labelAlign="left"
          labelWrap
          colon={false}
          onFinish={onFinish}
        >
          <Row gutter={16}>
            <Col className={stores.gutter_row} span={4}>
              <div>
                <Form.Item label="门店" name="key">
                  <Input allowClear placeholder="请输入" />
                </Form.Item>
              </div>
            </Col>

            <Col className={stores.gutter_row} span={4}>
              <div>
                <Form.Item label="服务范围" name="services">
                  <Select allowClear placeholder="请选择">
                    {servicesList.map((item: any) => {
                      return (
                        <Select.Option key={item.id} value={item.name}>
                          {item.name}
                        </Select.Option>
                      );
                    })}
                  </Select>
                </Form.Item>
              </div>
            </Col>
            <Col className={stores.gutter_row} span={6}>
              <div>
                <Button
                  htmlType="submit"
                  type="primary"
                  style={{ width: 100 }}
                >
                  查询
                </Button>
              </div>
            </Col>
          </Row>
          {/* 添加按钮 */}
          <div className={stores.box}>
            <div>
              <Button
                onClick={goadd}
                type="primary"
              >
                添加
              </Button>
            </div>
            <div>
              <Button
                danger
                type="primary"
                onClick={() => delAll()}
                style={{marginLeft:'10px'}}
              >
                批量删除
              </Button>
            </div>
          </div>
        </Form>
      </div>

      {/* 表格列表 */}
      <div className={stores.buttom}>
        <Table
          rowSelection={{
            ...storesSelection,
          }}
          rowKey={(record: any) => record.id}
          columns={columns}
          dataSource={list.array}
          pagination={false}
        />
        <Pagination
          showQuickJumper
          total={list.total}
          showTotal={(total) => `总共 ${total} 条`}
          onChange={onChange}
        />
      </div>
      </div>
      {/* 详情 */}
    
{
  open &&
  <StoresDetail 
      isopen={open}
      info={red}
      setIsModalOpen={setOpen}
      >
       
      </StoresDetail>
}
      
      
    </div>
  );
};
export default Questions;
